<template>
  <div class="playground-page">
    <p style="line-height: 12px; text-align: left; font-size: 20px; font-weight: bold;">
      理工操场/运动场
    </p>
    <p style="line-height: 12px; text-align: left; font-size: 15px; font-weight: bold;">
      点击某行可以跳转到详情
    </p>
    <!-- 查询参数表单 -->
    <el-form ref="queryForm" :model="queryForm" class="query-form" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="内容标题">
            <el-input v-model="queryForm.contentTitle" placeholder="请输入内容标题"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="内容分类">
            <el-select v-model="queryForm.contentCategory" placeholder="请选择内容分类">
              <el-option label="南区操场" value="南区操场"></el-option>
              <el-option label="足球场" value="足球场"></el-option>
              <el-option label="南区篮球场" value="南区篮球场"></el-option>
              <el-option label="北区篮球场" value="北区篮球场"></el-option>
              <el-option label="南区体育馆" value="南区体育馆"></el-option>
              <el-option label="北区体育馆" value="北区体育馆"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="额外消费">
            <el-select v-model="queryForm.contentPrice" placeholder="请选择是否需要额外消费">
              <el-option label="是" value="是"></el-option>
              <el-option label="否" value="否"></el-option>
              <el-option label="分情况" value="分情况"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="内容作者">
            <el-input v-model="queryForm.contentAuthor" placeholder="请输入内容作者"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="排序字段">
            <el-select v-model="queryForm.orderBy" placeholder="请选择排序字段">
              <el-option label="创建时间升序" value="1"></el-option>
              <el-option label="创建时间降序" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="fetchData">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 查询结果表格 -->
    <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        @row-click="handleRowClick"> <!-- 添加点击事件 -->
      <el-table-column label="内容标题" prop="contentTitle"></el-table-column>
      <el-table-column label="内容分类" prop="contentCategory"></el-table-column>
      <el-table-column label="额外消费" prop="contentPrice"></el-table-column>
      <el-table-column label="内容描述" prop="contentDescription"></el-table-column>
      <el-table-column label="内容作者" prop="contentAuthor"></el-table-column>
      <el-table-column label="创建时间" prop="contentCreateTime" width="180"></el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
        v-model:currentPage="queryForm.pageNum"
        v-model:page-size="queryForm.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'PlaygroundPage',
  data() {
    return {
      queryForm: {
        contentTitle: '',
        contentCategory: '',
        contentPrice: '',
        contentAuthor: '',
        orderBy: null,
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      total: 0,
      loading: false
    };
  },
  methods: {
    // 查询数据
    async fetchData() {
      this.loading = true;
      try {
        const response = await axios.get('/playground/page', {params: this.queryForm});
        this.tableData = response.data.data.list || [];
        this.total = response.data.data.total || 0;
      } catch (error) {
        this.$message.error('查询失败：' + error.message);
      } finally {
        this.loading = false;
      }
    },

    // 分页事件处理
    handleSizeChange(newSize) {
      this.queryForm.pageSize = newSize;
      this.fetchData();
    },

    handleCurrentChange(newPage) {
      this.queryForm.pageNum = newPage;
      this.fetchData();
    },

    // 重置表单
    resetForm() {
      this.queryForm.contentTitle = '';
      this.queryForm.contentCategory = '';
      this.queryForm.contentPrice = '';
      this.queryForm.contentAuthor = '';
      this.queryForm.orderBy = null;
      this.queryForm.pageNum = 1;
      this.queryForm.pageSize = 10;
      this.fetchData();
    },

    // 行点击事件
    handleRowClick(row) {
      // 跳转到详情页并携带 contentId 参数
      this.$router.push({
        path: '/PlaygroundDetail', query: {
          playgroundId: row.contentId
        }
      });
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>

<style scoped>
.query-form {
  margin-bottom: 20px;
}
</style>